<template>
    <div class="shouye">
        <el-container class="layout">
            <!-- 轮播图区域 -->
            <el-header class="toubu">
                <el-carousel :interval="4000" type="card" class="lbt">
                    <el-carousel-item v-for="(item, index) in images" :key="index">
                        <img :src="item.url" alt="轮播图片" style="width:80%; object-fit: cover;" />
                    </el-carousel-item>
                </el-carousel>
            </el-header>

            <!-- 主内容区域 -->
            <el-main class="neirong">
                <el-row :gutter="20">
                    <!-- 左侧：菜谱展示 -->
                    <el-col :span="16">
                        <h3>最新菜谱</h3>
                        <el-row :gutter="20">
                            <el-col :span="12" v-for="(dish, index) in dishes" :key="index">
                                <el-card class="dish-card">
                                    <!-- 菜谱名字 -->
                                    <div class="dish-name">{{ dish.cookbName }}</div>
                                    <!-- 菜谱图片 -->
                                    <div class="dish-image">
                                        <img :src="dish.recipeImg" alt="菜谱图片" />
                                    </div>
                                    <!-- 按钮区：点击查看 -->
                                    <div class="dish-action">
                                        <el-button type="primary" @click="viewDish(dish)">点击查看</el-button>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-col>

                    <!-- 右侧：公告信息展示 -->
                    <el-col :span="8">
                        <h3>系统公告</h3>
                        <el-card v-for="(announcement, index) in announcements" :key="index"
                            style="margin-bottom: 20px;">
                            <div class="announcement-header">
                                <div>发布人：{{ announcement.adminName }}</div>
                                <div>发布时间：{{ announcement.publishTime }}</div>
                            </div>
                            <div class="announcement-title">
                                <strong>{{ announcement.anTitle }}</strong>
                            </div>
                            <div class="announcement-content">
                                {{ announcement.anContent }}
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { adGetAnnouncListApi } from '@/api/announcement'
import type { Announcement } from '@/api/announcement/anTable'
import { getCarouselsApi } from '@/api/carousel'
import type { Carousel } from '@/api/carousel/carouselTable'
import { getRecipeBytime } from '@/api/food'
import type { FoodTable } from '@/api/food/foodTable'
import router from '@/router'
import { useFoodStore } from '@/store/comment'
import { onMounted, ref } from 'vue'
//获取菜谱信息store
const useFood = useFoodStore()

// 轮播图图片数组
const images = ref<Carousel[]>([
])
// 菜谱数组，每个菜谱对象包含名字和图片URL
const dishes = ref<FoodTable[]>()
// 公告数组，每个公告对象包含发布人、发布时间、标题和内容
const announcements = ref<Announcement[]>()
//获取最新菜谱方法
const getRecipe=async ()=>{
    const res = await getRecipeBytime()
    if(res.code==200){
        dishes.value=res.data
        console.log(dishes.value)
    }
}
//获取展示的轮播图方法
const getCarousel = async ()=>{
    const res = await getCarouselsApi()
    if(res.code==200){
        images.value= res.data
    }
}
//获取管理员发布的公告方法
const getAnnouncementList = async ()=>{
    const res = await adGetAnnouncListApi()
    if(res.code==200){
        announcements.value=res.data
    }
}
// 点击查看菜谱处理函数
const viewDish = (dish:any) => {
    useFood.selectedFood= dish
    router.push("/comment")
}
onMounted(() => {
    getRecipe()
    getCarousel()
    getAnnouncementList()
});
</script>

<style scoped>
.toubu {
    height: auto;
}

.lbt {

    /* 浅灰色边框 */
    width: 80%;
    margin: 0 auto;
}

.neirong {
    width: 78%;
    height: auto;
    margin-top: 20px;

    /* 浅灰色边框 */
    margin-left: auto;
    margin-right: auto;
}

/* 轮播图内部样式 */
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

/* 菜谱卡片样式 */
.dish-card {
    padding: 10px;
    text-align: center;
}

.dish-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.dish-image {
    margin-bottom: 10px;
}

/* 固定图片尺寸 */
.dish-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.dish-action {
    text-align: center;
    margin-top: 10px;
}

/* 公告信息样式 */
.announcement-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
}

.announcement-title {
    font-size: 16px;
    margin-bottom: 5px;
}

.announcement-content {
    font-size: 14px;
    color: #444;
}
</style>